<template>
  <div class="app-container">
    <el-header class="header">
      <h1 class="header-title">重庆大学附属医院</h1>
      <h1 class="welcome-title">{{ name }}，您好！</h1>
      <el-button type="info" round @click="handleLeave()"
        >退出</el-button
      >
    </el-header>
    <div class="main-container">
      <el-row class="tac">
        <el-menu
          style="width: 200px"
          :default-active="index"
          @select="handleSelect"
        >
          <el-menu-item index="1">
            <template v-slot:title>
              <span class="menu-title">预约/挂号</span>
            </template>
          </el-menu-item>
          <el-menu-item index="2">
            <template v-slot:title>
              <span class="menu-title">缴费</span>
            </template>
          </el-menu-item>
          <el-menu-item index="3">
            <template v-slot:title>
              <span class="menu-title">我的挂号</span>
            </template>
          </el-menu-item>
        </el-menu>
      </el-row>
      <el-main class="content">
        <router-view></router-view>
      </el-main>
    </div>
  </div>
</template>

<script>
export default {
  name: "UserComponent",
  data() {
    return {
      name: "兰爵", // 这里定义用户的名字
      index: 1,
    };
  },
  methods: {
    handleLeave() {
      localStorage.clear();
      this.$router.push({ name: "Login" });
    },
    handleSelect(index) {
      if (index === "1") {
        this.$router.push({ name: "UserAppointment" });
      } else if (index === "2") {
        this.$router.push({ name: "UserPayment" });
      } else if (index === "3") {
        this.$router.push({ name: "UserMyAppointments" });
      }
      console.log(index);
    },
    handleRouteChange(to) {
      console.log(to.name);
      if (to.name === "UserPayment") {
        this.index = "2";
      } else if (to.name === "UserMyAppointments") {
        this.index = "3";
      } else if (to.name === "UserAppointment") {
        this.index = "1";
      }
    },
  },
  watch: {
    $route(to) {
      // 当路由变化时执行的逻辑
      this.handleRouteChange(to);
    },
  },
  mounted() {
    // 初始化时执行的逻辑
    this.name = JSON.parse(localStorage.getItem("user")).name;
    this.handleRouteChange(this.$route);
  },
};
</script>

<style scoped>
/* 重置默认样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

.app-container {
  display: flex;
  flex-direction: column;
  width: 100vw; /* 设置宽度为视口宽度的100% */
  height: 90vh; /* 设置高度为视口高度的100% */
  border: 1px solid #ccc; /* 添加边框 */
  border-radius: 15px; /* 添加圆角 */
  overflow: hidden; /* 确保内容不会溢出圆角 */
}
.header {
  display: flex;
  justify-content: space-between; /* 左右对齐 */
  align-items: center; /* 垂直居中对齐 */
  background-color: #f9f9f9;
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.header-title {
  margin: 0;
  font-size: 24px;
  font-weight: bold;
  margin-left: 10px;
}

.welcome-title {
  margin: 0;
  font-size: 18px;
  font-weight: normal;
}

.main-container {
  display: flex;
  flex: 1;
  align-items: flex-start; /* 将内容靠上对齐 */
  padding-top: 20px; /* 添加顶部内边距 */
}

.sidebar {
  background-color: #f0f0f0;
  padding: 20px;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
}

.content {
  flex: 1;
  padding: 20px;
}

.user-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.page-title {
  text-align: center;
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: bold;
}

.tac {
  font-weight: bold; /* 使tac变粗 */
}

.menu-title {
  font-size: 18px; /* 设置菜单项标题字体大小 */
}
</style>
